import React, { Component } from 'react';
import { Modal, Form, Input, Select, InputNumber, Radio, DatePicker, message } from 'antd';
import http from '../api/http';
import TextArea from 'antd/lib/input/TextArea';
import moment from 'moment';
moment.locale('zh-cn');
const { RangePicker } = DatePicker;
const { Option } = Select;
class FormInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modalLoading: this.props.Loading,
        }
    }
    componentDidMount() {
        this.setState({ richText: [] })
    }
    fileBack = (value, theKey) => {
        this.setState({ [theKey]: value })
    }
    // 提交 添加，或者修改
    handleOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                Object.assign(values, this.state.formTs);
                console.log(this.state.formTs, values)
                // if(values['range-picker']){
                //     values.beginTime = values['range-picker'][0].format('YYYY-MM-DD');
                //     values.endTime = values['range-picker'][0].format('YYYY-MM-DD');
                // }
                // let url = values.id ? this.props.formInfo.updateUrl:this.props.formInfo.addUrl;
                // http.post(url,values).then((res)=>{
                //     this.props.FormUpdata('addUp')
                //     message.success('修改成功')
                // })
                this.props.formUpdata('refresh')
                message.success('修改成功')
            }
        });
    }
    /* 关闭弹框 */
    handleCancel = () => {
        this.props.formUpdata('close', 'false')
        this.setState({ richText: [] })
    }
    onChange = (key, date, dateString) => {
        this.setState({
            formTs: Object.assign({}, this.state.formTs, { [key]: dateString })
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const modal = { title: this.props.formInfo.info.id ? '修改内容' : '新增内容', visible: this.props.formInfo.visible, cancelText: '关闭', okText: '提交', width: this.props.length || 600 }
        return (
            <Modal {...modal} onOk={this.handleOk} maskClosable onCancel={this.handleCancel} destroyOnClose confirmLoading={this.props.loading}>
                {this.props.formInfo.visible &&
                    <Form {...http.formItemLayout} onSubmit={this.handleOk.bind(this)} className='flexlbwrap'>
                        {this.props.formInfo.label.map((item) => {
                            return (
                                <div key={item.theKey} style={{ width: item.type === 'textarea' ? '100%' : '50%' }}>
                                    {/* 隐藏input */}
                                    {item.type === 'hidden' &&
                                        <Form.Item label={item.label} style={{ display: 'none' }}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] })(
                                                <Input className='labelInfo'></Input>
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 文本框 */}
                                    {item.type === 'text' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] || '', rules: [{ required: item.master, message: '请填写正确的' + item.label }], })(
                                                <Input className='labelInfo'></Input>
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 一级下拉框 */}
                                    {item.type === 'select' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] || item.info[0].id, rules: [{ required: item.master, message: '请选择' + item.label }], })(
                                                <Select style={{ width: '60%' }} defaultActiveFirstOption>
                                                    {item.info.map((itemTwo) => {
                                                        return (
                                                            <Option key={itemTwo.id} value={itemTwo.id}>{itemTwo.name}</Option>
                                                        )
                                                    })}
                                                </Select>
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 多行文本 */}
                                    {item.type === 'textarea' &&
                                        <Form.Item label={item.label} {...http.formItemTextarea}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] || '', rules: [{ required: item.master, pattern: item.pattern, message: '请填写正确的' + item.label }], })(
                                                <TextArea className='wt100' size='large' />
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 数字输入框 */}
                                    {item.type === 'number' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] || '', rules: [{ required: item.master, message: '请填写正确的' + item.label }], })(
                                                <InputNumber min={1} max={100} />
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 单选内容 */}
                                    {item.type === 'radio' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.theKey, { initialValue: this.props.formInfo.info[item.theKey] || item.info[0].id, rules: [{ required: item.master, message: '请选择' + item.label }], })(
                                                <Radio.Group>
                                                    {item.info.map((radio) => {
                                                        return (<Radio key={radio.id} value={radio.id}>{radio.name}</Radio>)
                                                    })}
                                                </Radio.Group>
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 单个日期 */}
                                    {item.type === 'date' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.theKey, { rules: [{ required: item.master, message: '请选择' + item.label }], })(
                                                //    <input type='month'></input>
                                                <DatePicker onChange={this.onChange.bind(this, item.theKey)} />
                                            )}
                                        </Form.Item>
                                    }
                                    {/* 有效日期 */}
                                    {item.type === 'dateTwo' &&
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator('range-picker', { initialValue: [moment(this.props.formInfo.info[item.theKey] || '2019-02-01'), moment(this.props.formInfo.info[item.keyTwo] || '2019-02-01')], rules: [{ required: item.master, message: '请选择' + item.label }], })(
                                                <RangePicker onOk={this.okText} />
                                            )}
                                        </Form.Item>
                                    }
                                </div>)
                        })}
                    </Form>
                }
            </Modal>)
    }
}
const FormInfoForm = Form.create({ name: 'normal_advertise' })(FormInfo);
export default FormInfoForm;